<template>
  <div class="row">
    <q-item class="col-8 items-center">
      <q-item-label>创建时间：</q-item-label>
      <q-item-section>
        <AmyDate v-model:date="myQry.startDate"/>
      </q-item-section>
      <q-item-label>&nbsp; - &nbsp; </q-item-label>
      <q-item-section>
        <AmyDate v-model:date="myQry.endDate"/>
      </q-item-section>
    </q-item>
    <q-item class="col-4 items-center">
      <q-item-section>
        <q-btn
          dense
          rounded
          unelevated
          color="teal-3"
          label="查询"
          @click="beginAllQuery"
        />
      </q-item-section>
      <q-item-section>
        <q-btn
          dense
          rounded
          unelevated
          color="amber-4"
          label="重置"
          @click="clearAllQuery"
        />
      </q-item-section>
    </q-item>
  </div>
  <div>
    <AmyMessage
      ref="myMsgRef"
      :message="myMsg"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, ref, defineAsyncComponent } from 'vue';
const AmyDate = defineAsyncComponent(() => import('./AmyDate.vue'));
const AmyMessage = defineAsyncComponent(() => import('./AmyMessage.vue'));
export type MessageInstance = InstanceType<typeof AmyMessage>;

export default defineComponent({
  name: 'AmyQueryDate',
  components: {
    AmyDate,
    AmyMessage
  },
  props: {
    searchLabel: String,
    default: () => {
      return '检索名称'
    }
  },
  emits: ['make-search-condition'],
  setup (props, context) {
    //数据解构
    const {
      searchLabel
    } = toRefs(props);

    //响应数据
    let myQry = ref({
      startDate: '2022-01-01',
      endDate: '2022-10-20'
    });

    //消息通知
    let myMsg = ref('');

    //通知对话框
    let myMsgRef = ref<MessageInstance | null>(null);

    //确定删除
    const beginAllQuery = () => {
      if ((myQry.value.startDate === '') || (myQry.value.endDate === '')) {
        myMsg.value = '检索条件不能为空！';
        if (myMsgRef.value) {
          myMsgRef.value.show();
        }
        return;
      }
      context.emit('make-search-condition', myQry.value);
    }

    //关闭
    const clearAllQuery = () => {
      myQry.value.startDate = '';
      myQry.value.endDate = '';
    }

    return {
      searchLabel,
      myQry,
      myMsg,
      myMsgRef,
      beginAllQuery,
      clearAllQuery
    };
  }
})
</script>

<style scoped>

</style>
